<template>
	<view class="globe_back">
		<view class="moneyBox">
			<view class="flex timebox justify_content_center">
				<text>交易剩余时间</text>
				<view>
					<u-count-down :time="30 * 60 * 60 * 1000" format="mm:ss" autoStart millisecond @change="onChange">
						<view class="time">
							<text class="time__item">{{ timeData.minutes }}:</text>
							<text class="time__item">{{ timeData.seconds }}</text>
						</view>
					</u-count-down>
				</view>
			</view>
			<view class="money">
				￥
				<text>{{ $lz.money(orderInfo.payment_money) }}</text>
			</view>
			<view class="tip">超时订单将自动关闭</view>
		</view>
		<view class="back_fff br_16 p_24 list" style="margin: 10px">
			<view class="flex justify_content_between">
				<view>支付方式</view>
				<view class="flex">
					<view class="wx_icon">
						<image style="width: 100%" src="@/static/imgs/wx.png" mode="widthFix"></image>
					</view>
					<text>微信支付</text>
				</view>
			</view>
			<view class="flex justify_content_between">
				<view>订单类型</view>
				<view>{{ dicts[orderInfo.meta.mode] }}</view>
			</view>
		</view>
		<view class="btn" @click="handlePayment">确认交易</view>
	</view>
</template>

<script>
	import {
		getOrderInfo,
		getDictByCode,
		transfers
	} from '@/api';
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {},
				dicts: {},
				timeData: {}
			};
		},
		onLoad(args) {
			console.debug('args', args);
			if (args.id) {
				this.orderId = args.id;
				// this.orderInfo.order_id = args.id;
				this.handleGetOrderInfo();
			} else {
				this.$u.route({
					type: 'back'
				});
			}
		},
		methods: {
			handleGetOrderInfo() {
				getOrderInfo(this.orderId).then(({
					data
				}) => {
					this.orderInfo = data;
					this.getOrderMode()
				});
			},
			getOrderMode() {
				getDictByCode('order_model').then(({
					data
				}) => {
					const vaules = data.reduce((accu, curr) => ({
						...accu,
						[curr.key]: curr.title
					}), {});
					console.log(vaules)
					this.dicts = vaules
					console.log(this.dicts[this.orderInfo.meta.mode], this.orderInfo.meta.mode)
				})
			},
			handlePayment() {
				transfers({
					id: this.orderId
				}).then((res) => {
					console.log('transfers res: ', res);
					uni.$lz.route({
						url: '/pages/index/success',
						type: 'redirect'
					});
				});
			},
			onChange(e) {
				this.timeData = e;
			},
		}
	};
</script>

<style lang="scss">
	.moneyBox {
		text-align: center;
		padding-top: 30rpx;
	}

	.timebox {
		color: #666b75;
		font-size: 24rpx;
	}

	.time {
		margin-left: 10rpx;
	}

	.money {
		color: #ff6401;
		font-size: 50rpx;
		font-weight: bold;
		padding: 10rpx 0;
	}

	.tip {
		color: #666b75;
		font-size: 28rpx;
		padding-bottom: 50rpx;
		margin-top: 10rpx;
	}

	.list {
		font-size: 28rpx;
		color: #333a47;
		line-height: 50rpx;
	}

	.wx_icon {
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: #3377ff;
		color: #fff;
		border-radius: 24rpx;
		font-size: 32rpx;
		position: fixed;
		bottom: 56rpx;
		left: 50%;
		margin-left: -343rpx;
	}
</style>